<template>
    <div class="flex-app-continer">
        <vxe-modal
            :showFooter="true"
            title="查看流程"
            ref="modal1"
            fullscreen
            @close="closeSearch"
        >
            <div style="width: 100%; height: 100%" id="container"></div>
            <template v-slot:footer>
                <vxe-button @click="closeSearch" status="info">关闭</vxe-button>
            </template>
        </vxe-modal>
    </div>
</template>
  <script>
import { Graph } from '@antv/x6'
export default {
    name: 'lookFlow',
    props: {
        flowJson: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            graph: null,
        }
    },
    methods: {
        mountedGraph() {
            this.graph.fromJSON(this.flowJson) // 渲染元素
            this.graph.centerContent() // 居中显示
        },
        initGraph() {
            return new Promise((resolve) => {
                const graph = new Graph({
                    container: document.getElementById('container'),
                    width: '100%',
                    height: '100%',
                    background: {
                        color: '#F2F7FA',
                    },
                    interacting: function (cellView) {
                        // if (
                        //     cellView.cell.getData() != undefined &&
                        //     !cellView.cell.getData().disableMove
                        // ) {
                        //     return { nodeMovable: false }
                        // }
                        // return true
                        return { nodeMovable: false }
                    },
                })
                // graph.disableDrag(document.getElementById('container'))

                this.graph = graph
                resolve(true)
            })
        },
        closeSearch() {
            this.$emit('flowDialogFn',false)
            setTimeout(()=>{
                this.$refs.modal1.close()
            },100)
        },
        show(row) {
            //this.reset()
            // let slv = row.slv
            // this.slv = slv
            this.$refs.modal1.open()
            setTimeout(() => {
                this.initGraph().then((val) => {
                    this.mountedGraph()
                })
            }, 500)
        },
    },
}
</script>
  <style lang="scss">
</style>